<template>
  <el-table ref="multipleTableRef" :data="tableData" style="width: 100%"
  @selection-change="handleSelectionChange"
  > 
    <el-table-column type="selection" width="55" />
    <el-table-column prop="orderPO" label="订单编号" show-overflow-tooltip/>
    <el-table-column prop="price" label="实付金额" />
    <el-table-column prop="payBefore" label="快速金额" />
    <el-table-column prop="name" label="收货人" />
    <el-table-column prop="shopAddress" label="收货地址" show-overflow-tooltip/>
    <el-table-column prop="price" label="成交金额"/>
    <el-table-column prop="orderStatus" label="订单状态" />
    <el-table-column prop="payWay" label="支付方式" />
    <el-table-column prop="opt" label="操作" width="150" >    
      <template #default="scope">
         <el-button
        link
        type="primary"
        size="small"
        @click="deleteRow(scope.row)"
      >
        删除
         </el-button>
         <el-button size= "small" class="mt-4" @click="onAddItem(scope.row)"
           >添加</el-button>
      </template>     
    </el-table-column>
  </el-table>
     <el-button size= "small" class="mt-4" @click="delselected(tableData[3])">批量删除</el-button>
    <div class="pagination">
      <el-pagination
        background
        :total="100"
        class="mt-4"
        small
        layout="prev, pager, next"
        @current-change="handleCurrentChange"
      />
    </div>
</template>

<script>
import { ref, onMounted} from 'vue';
import datas from "@/mock/index.js";
import { ElTable } from 'element-plus';
import { ElMessageBox } from "element-plus";
export default {
  setup() {
    const multipleTableRef = ref();
    const multipleSelection = ref([]);
    const flag = ref("false")
    const tableData = ref([]);
    const currentPage = ref(1);
    const pageSize = ref(6);
    const count = ref();
    let values = ref()

    let selectedVal = [];

    const handleSelectionChange = (val) => {
      console.log(val);
      selectedVal = val;
    };

     // 请求数据函数
    const getData = async () => {
      const res = await datas.getData({
        pageSize: pageSize.value,
        currentPage: currentPage.value,
      });
      tableData.value = res.list;
      count.value = res.count;
    };


    // 挂在前调用请求数据函数 渲染页面
    onMounted(() => {
      getData();
    });

    // 点击分页时调用请求函数 调用函数前赋值传参 =>请求数据
    const handleCurrentChange = (val) => {
      currentPage.value = val;
      getData(val);
    };

    // 删除
    const deleteRow = (index) => { 
      ElMessageBox.confirm("您确认删除此项吗?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",})     
      .then(()=>{
        values.value=index
         datas.removeData(index.shopId)
          getData()
      })
    }

    // 添加
    const obj = 
      {
          "shopId|+1": 1,  //生成商品id，自增1
          "orderPO":122253673341,  // 订单编号
          "price": 30,  //随机生成商品价格 在30-1000之间
          "num|1-10" :2,    //随机生成商品数量 在1-10之间
          "totalSrice":2399,   // 实付金额23423
          "payBefore":300,   // 快速金额300
          "name":"张三", // 收货人
          "shopAddress": "杭州shshi3", //随机生成地址
          "doneSrice":2399,   // 成交金额23423
          "orderStatus":"已完成",  //订单状态
          "payWay":"微信" , // 支付方式
          "checked" : false,
          "flag" : false           
      }
    const onAddItem = (item) => {
      console.log(item);
         datas.addData(item.shopId,obj)
         getData()
    }
    // 批量删除
    // const arr =[];
    const delselected = ()=>{
      const ids = selectedVal.map((item) => item.shopId);
      datas.delDatas({ids: ids});
      getData()
    }

    return {
      multipleTableRef,
      multipleSelection,
      tableData,
      ElTable,
      deleteRow,
      onAddItem,
      flag,
      handleCurrentChange,
      ElMessageBox,
      selectedVal,
      handleSelectionChange,
      values,
      obj,
      delselected
    }
  }
}

</script>

<style lang="less" scoped>
.el-pagination {
  justify-content: center;
  margin-top: 20px;
}
</style>